<template>
    <div class="params">
        <!-- 1.0 面包屑导航 -->
        <crumbs-nav :level1="'商品管理'" :level2="'商品参数'"></crumbs-nav>
        <!-- 2.0 级联选择器 -->
        <el-cascader
          :options="categortyList"
          :props="defaultProps"
          v-model="selectedOptions3"
          @change="valChange"
          :show-all-levels="false"
        ></el-cascader>
        
        <!-- 3.0tabs -->
        <el-tabs 
        type="border-card"
        v-model="defaultTab"
        @tab-click="handleClickTab">           
            <el-tab-pane label="动态参数" name="params">
                <el-button 
                type="success" 
                @click="handleClickAddParams"
                plain>添加动态属性</el-button>
                <template>
                    <el-table
                    border
                    :data="paramsList"
                    style="width: 100%">
                      <el-table-column type="expand">
                        <template slot-scope="scope">
                          <el-form  >
                                <el-tag
                                :key="index"
                                v-for="(items,index) in scope.row.attr_vals"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(index,scope.row)">
                                  {{items}}
                                </el-tag> 
                                <el-input
                                class="input-new-tag"
                                style="width:150px"                                
                                v-if="scope.row.inputVisible"
                                v-model="scope.row.inputValue"
                                placeholder="请输入参数"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm(scope.row)"
                                @blur="clearInputValue(scope.row)"
                                >
                                </el-input>  
                                <el-button 
                                v-else 
                                class="button-new-tag" 
                                size="small" 
                                @click="showInput(scope.row)">++添加参数</el-button>      
                          </el-form>
                        </template>
                      </el-table-column>
                      <el-table-column
                        type="index"
                        >
                      </el-table-column>
                      <el-table-column
                        label="参数名称"
                        prop="attr_name">
                      </el-table-column>
                      <el-table-column
                        label="操作">
                            <template slot-scope="scope">
                                <el-button
                                  size="mini"
                                  @click="handleEditParams(scope.row)"><i class="el-icon-edit"></i></el-button>
                                <el-button
                                  size="mini"
                                  type="danger"
                                  @click="handleDeleteParams(scope.row)"><i class="el-icon-delete"></i></el-button>
                            </template>
                      </el-table-column>
                    </el-table>
                </template>
            </el-tab-pane>
            <el-tab-pane label="静态属性" name="property">
                <el-button 
                type="success" 
                @click="handleClickAddProperty"
                plain>添加静态属性</el-button>
                <template>
                    <el-table
                      :data="propertyList"
                      style="width: 100%">
                      <el-table-column
                        type="index"
                        >
                      </el-table-column>
                      <el-table-column
                        label="属性名称"
                        prop="attr_name">
                      </el-table-column>
                      <el-table-column
                        label="属性名称"
                        prop="attr_vals">
                      </el-table-column>
                      <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                                <el-button
                                  size="mini"
                                  @click="handleEditPorperty(scope.row)"><i class="el-icon-edit"></i></el-button>
                                <el-button
                                  size="mini"
                                  type="danger"
                                  @click="handleDeletePorperty(scope.row)"><i class="el-icon-delete"></i></el-button>
                            </template>
                      </el-table-column>
                    </el-table>
                </template>
            </el-tab-pane>
        </el-tabs>
        <!-- 4.0 添加动态参数的弹窗 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible4AddParams"
        width="50%">           
            <el-form :model="paramsData" :rules="rules" ref="paramsData" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="参数名称" prop="attr_name">
                        <el-input v-model="paramsData.attr_name"></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible4AddParams = false">取 消</el-button>
              <el-button type="primary" @click="handleClickAddParamsSend">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 5.0 添加静态的弹窗 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible4AddProperty"
        width="50%">           
            <el-form :model="propertyData" :rules="rules" ref="propertyData" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="参数名称" prop="attr_name">
                        <el-input v-model="propertyData.attr_name"></el-input>
                    </el-form-item>
                    <el-form-item label="参数名称" prop="attr_vals">
                        <el-input v-model="propertyData.attr_vals"></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible4AddProperty = false">取 消</el-button>
              <el-button type="primary" @click="handleClickAddPropertySend">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 6.0 编辑动态属性的弹窗 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible4EditParams"
        width="50%">           
            <el-form :model="editData" :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="参数名称" prop="attr_name">
                        <el-input v-model="editData.attr_name" placeholder="请输入修改的参数名"></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible4EditParams = false">取 消</el-button>
              <el-button type="primary" @click="handleClickEditParamsSend">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 7.0 编辑静态属性的弹窗 -->
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible4EditProperty"
        width="50%">           
            <el-form :model="editData" :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="参数名称" prop="attr_name">
                        <el-input v-model="editData.attr_name"></el-input>
                    </el-form-item>
                    <el-form-item label="参数名称" prop="attr_vals">
                        <el-input v-model="editData.attr_vals"></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible4EditProperty = false">取 消</el-button>
              <el-button type="primary" @click="handleClickEditPropertySend">确 定</el-button>
            </span>
        </el-dialog>
        

    </div>
</template>

<script>
import crumbsNav from '../../common/crumbsNav'
export default {
    name: 'params',
    components:{
        crumbsNav
    },
    data() {
        return {
            //编辑静态属性的弹窗的boolean
            dialogVisible4EditProperty:false,
            //编辑动态参数的弹窗的boolean
            dialogVisible4EditParams:false,
            //添加动态参数的弹窗的boolean
            dialogVisible4AddParams:false,
            //添加静态属性的弹窗boolean
            dialogVisible4AddProperty:false,
            //动弹参数绑定的数据
            paramsData:{
                attr_name:'',
                attr_sel:'many'
            },
            //静态参数绑定的数据
            propertyData:{
                attr_name:'',
                attr_vals:'',
                attr_sel:'only'
            },
            //编辑动态/静态参数发送请求需要的数据
            editData:{
                attrid:'',
                attr_name:'',
                attr_sel:'',
                attr_vals:''
            },
            // 分类列表
            categortyList:[],
            // 默认映射
            defaultProps:{
                value: 'cat_id',
                label: 'cat_name',
                children:'children'
            },
            selectedOptions3:[],
            // 要展示商品分类名默认tab的name
            defaultTab: 'params',
            // 要展示商品分类名默认3级id
            defaultId:'',
            // 要展示商品分类名动态参数列表
            paramsList:[],
            // 要展示商品分类名静态属性列表
            propertyList:[],
            //校验规则
            rules:{
                attr_name: [{ required: true, message: '请输入参数', trigger: 'blur' },],
                attr_vals: [{ required: true, message: '请输入参数', trigger: 'blur' },]
            },
            //添加参数需要的参数数据
            addParamsList:{
                attr_name:'',
                attr_sel:'many',
                attr_vals:''
            }
        }
    },
    created() {
        this.getCategortyDataList()  
    },
    mounted(){
        console.log(4)
    },
    methods: {
        //1-1删除参数的方法(btn上面的按钮)
        handleClose(index,val){
            //赋值   用作传参
            this.addParamsList.attr_name = val.attr_name
            //将点击删除的那一项在数组中删除
            val.attr_vals.splice(index,1)
            //赋值  让数组以,分割为字符串   用作传参
            this.addParamsList.attr_vals = val.attr_vals.join(",")
            this.$axios.put(`categories/${val.cat_id}/attributes/${val.attr_id}`,this.addParamsList)
                        .then(res => {                            
                             this.$message({
                              type: 'success',
                              message: res.data.meta.msg
                            });
                            val.inputVisible = false
                            //请求完成后在转化为数组,让dom去渲染
                            val.attr_vals = this.addParamsList.attr_vals.split(",")
                        })
        },
        //1-2添加参数的方法（input;回车弹起事件）
        handleInputConfirm(val){
            this.addParamsList.attr_name = val.attr_name
            this.addParamsList.attr_vals = val.attr_vals.join(',')+','+val.inputValue
            if(val.attr_vals.length===0){
                this.addParamsList.attr_vals = this.addParamsList.attr_vals.substr(1,this.addParamsList.attr_vals.length)
            }else{
                this.addParamsList.attr_vals = this.addParamsList.attr_vals
            }

            this.$axios.put(`categories/${val.cat_id}/attributes/${val.attr_id}`,this.addParamsList)
                        .then(res => {                            
                             this.$message({
                              type: 'success',
                              message: res.data.meta.msg
                            });
                            val.inputVisible = false
                            val.attr_vals = this.addParamsList.attr_vals.split(",")
                        })
        },
        //1-3input失去焦点事件
        clearInputValue(val){
            val.inputValue = ''
            val.inputVisible = false
        },
        //1-4 input展示的方法
        showInput(val){    
            
            val.inputVisible = true 
            console.log(val)           
            this.$nextTick(()=>{
                // 说明数据更新了，但是dom没有更新
                console.log(3)
                
                this.$refs.saveTagInput.focus()
              })
        },
        //添加动态参数弹窗按钮
        handleClickAddParams(){
            this.dialogVisible4AddParams = true
        },
        //添加动态参数发送请求
        handleClickAddParamsSend(){
            this.$axios.post(`categories/${this.defaultId}/attributes`,this.paramsData)
                        .then(res => {
                            this.dialogVisible4AddParams = false
                            if(res.data.meta.status == 201){
                                this.$message({
                                    type: 'success',
                                    message: res.data.meta.msg
                                })
                                this.getParamsDataManyList(this.defaultId)
                                this.$refs.paramsData.resetFields()
                            }
                        })
        },
        //添加静态属性弹窗按钮
        handleClickAddProperty(){
            this.dialogVisible4AddProperty = true
        },
        //添加静态属性发送请求
        handleClickAddPropertySend(){
            this.$axios.post(`categories/${this.defaultId}/attributes`,this.propertyData)
                        .then(res => {
                            this.dialogVisible4AddProperty = false
                            if(res.data.meta.status == 201){
                                this.$message({
                                    type: 'success',
                                    message: res.data.meta.msg
                                })
                                this.getPropertyDataOnlyList(this.defaultId)
                                this.$refs.propertyData.resetFields()
                            }
                        })
        },
        //编辑动态参数
        handleEditParams(val){
            this.dialogVisible4EditParams = true
            this.editData.attr_name = val.attr_name
            this.editData.attrid = val.attr_id
            this.editData.attr_sel = 'many'
        },
        //编辑动态参数发送请求
        handleClickEditParamsSend(){
            this.$axios.put(`categories/${this.defaultId}/attributes/${this.editData.attrid}`,this.editData)
                        .then(res => {
                            this.dialogVisible4EditParams = false
                            if(res.data.meta.status == 200){
                                this.$message({
                                    type: 'success',
                                    message: res.data.meta.msg
                                })
                                this.getParamsDataManyList(this.defaultId)
                                this.$refs.editData.resetFields()
                            }
                        })
        },
        //删除动态参数
        handleDeleteParams(val){
            this.$axios.delete(`categories/${val.cat_id}/attributes/${val.attr_id}`)
                    .then(res => {
                         if(res.data.meta.status == 200){
                                this.$message({
                                    type: 'success',
                                    message: res.data.meta.msg
                                })
                                this.getParamsDataManyList(this.defaultId)
                            }
                    })
        },
        //编辑静态属性
        handleEditPorperty(val){
            this.dialogVisible4EditProperty = true
            this.editData.attr_name = val.attr_name
            this.editData.attr_vals = val.attr_vals
            this.editData.attrid = val.attr_id
            this.editData.attr_sel = 'only'
        },
        //编辑静态属性发送请求
        handleClickEditPropertySend(){
            this.$axios.put(`categories/${this.defaultId}/attributes/${this.editData.attrid}`,this.editData)
                        .then(res => {
                            this.dialogVisible4EditProperty = false
                            if(res.data.meta.status == 200){
                                this.$message({
                                    type: 'success',
                                    message: res.data.meta.msg
                                })
                                this.getPropertyDataOnlyList(this.defaultId)
                            }
                        })
        },
        //删除静态属性
        handleDeletePorperty(val){
            this.$axios.delete(`categories/${val.cat_id}/attributes/${val.attr_id}`)
                    .then(res => {
                         if(res.data.meta.status == 200){
                            this.$message({
                                type: 'success',
                                message: res.data.meta.msg
                            })
                            this.getPropertyDataOnlyList(this.defaultId)
                        }
                    })
        },
        //级联值改变事件
        valChange(val){
            // 改变默认三级的ID
            
            this.defaultId = val[2]
            console.log(111)
            
            //判断默认tab的name是动态还是静态
            if(this.defaultTab=='property'){
                console.log('property') 
                this.getPropertyDataOnlyList(this.defaultId)
            }else if(this.defaultTab=='params'){  
                console.log('params') 
                console.log(this.defaultId)           
                this.getParamsDataManyList(this.defaultId)
            }
        },
        // tab切换时根据tab   name触发的的方法
        handleClickTab(tab) {
        if(tab.name=='property'){
            // 更改默认展示tab的name
            this.defaultTab = 'property'
            this.getPropertyDataOnlyList(this.defaultId)
        }else if(tab.name=='params'){
            // 更改默认展示tab的name
            this.defaultTab = 'params'
            this.getParamsDataManyList(this.defaultId)
        }
      },
        //获取商品分类数据   
        getCategortyDataList(){
            this.$axios.get(`categories`,{
                params:{type:3}
            }).then(res => {
                this.categortyList = res.data.data
                this.selectedOptions3 = [
                    this.categortyList[0].cat_id,
                    this.categortyList[0].children[0].cat_id,
                    this.categortyList[0].children[0].children[0].cat_id
                ]
                //一级的ID
                // this.selectedOptions3[0] = res.data.data[0].cat_id
                // //二级的ID
                // this.selectedOptions3[1] = res.data.data[0].children[0].cat_id
                // //三级的ID
                // this.selectedOptions3[2] = res.data.data[0].children[0].children[0].cat_id
                // 默认曲面电视时Id
                this.defaultId = this.categortyList[0].children[0].children[0].cat_id
                this.getParamsDataManyList(this.defaultId)
            })
        },
        // 请求动态参数
        getParamsDataManyList(id){
            this.$axios.get(`categories/${id}/attributes`,{
                params:{sel:'many'}
            }).then(res => {
                console.log(res.data.data)
                res.data.data.forEach(item => {
                    if(item.attr_vals.trim().length === 0){
                        item.attr_vals = []
                    }else{
                        item.attr_vals = item.attr_vals.split(',')                        
                    }
                    item.inputVisible = false
                    item.inputValue = ""    
                    console.log(1)
                    // this.paramsList  = res.data.data 
                    //写在这  会导致数据一致在更新,从而引发莫名其妙的BUG
                    console.log(2)                
                })    
                   this.paramsList  = res.data.data         
            })
        },
        // 请求静态属性
        getPropertyDataOnlyList(id){
            this.$axios.get(`categories/${id}/attributes`,{
                params:{sel:'only'}
            }).then(res => {
                this.propertyList = res.data.data
            })
        }
    },
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag{
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

